<template>
  <div>
    分类
    <p>store=count:{{ count }}</p>
    <p>
      <button @click="addcount">同步+1</button>
      <button @click="addcountstep(10)">同步+10</button>
      <button @click="addcountAsync">异步+1</button>
      <button @click="addcountstepAsync(10)">异步+10</button>
    </p>
    <!-- 展示学校列表 -->
    <ul>
      <li v-for="item in schoolList" :key="item.id">
        {{ item.school_name }}
      </li>
    </ul>
  </div>
</template>

<script>
// 展开运算符
// let arr = ["赵健", "马京京", "李爽"];
// let brr = ["张增增", ...arr];
// console.log("brr", brr);

// let obj = {
//   name: "张三",
//   age: 20,
// };
// console.log({ ...obj });

// 使用辅助函数方式
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "",
  data() {
    return {
      num: 100,
    };
  },
  computed: {
    doublenum() {
      return this.num * 2;
    },
    // 使用辅助函数将store仓库中的数据映射到当前组件的计算属性上
    ...mapState(["count", "schoolList"]),
  },
  created() {
    this.setschoolListAsync();
    console.log("分类-this", this);
  },
  methods: {
    myfn() {},
    // 将store仓库中的同步和异步方法映射到当前组件的mthods中
    ...mapMutations(["addcount", "addcountstep"]),
    ...mapActions(["addcountAsync", "addcountstepAsync", "setschoolListAsync"]),
  },
};
</script>
<style scoped>
</style>